<template>
  <div class="main-content">
    <div class="repo-summary">
      <h2>{{ repoName }} 镜像列表</h2>
      <div class="table-wrapper">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="Property" width="200">
            <template slot-scope="scope">
              <strong>{{ scope.row.property }}</strong>
            </template>
          </el-table-column>
          <el-table-column label="Value">
            <template slot-scope="scope">
              <span v-if="scope.row.type === 'tag'" class="tag-container">
                <!-- <el-tag :v-for="x in scope.row.value">{{ x }}</el-tag> -->
                <el-tag type="success">{{ scope.row.value }}</el-tag>
              </span>
              <span v-else-if="scope.row.type === 'link'">
                <el-tag>{{ scope.row.value }}</el-tag>
              </span>
              <span v-else>
                {{ scope.row.value }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="Object.keys(imagedata).length > 0">
      <el-card>
        <div slot="header" class="clearfix header-container">
          <div class="header-left">
            <span>Docker拉取命令</span>
          </div>
          <el-button
            icon="el-icon-document-copy"
            class="header-right"
            type="text"
            @click="copyToClipboard(dockerCommand)"
          ></el-button>
        </div>
        <div class="command-container">
          <code class="command-box">{{ dockerCommand }}</code>
        </div>
      </el-card>

      <el-card>
        <div slot="header" class="clearfix header-container">
          <div class="header-left">
            <span>Containerd拉取命令</span>
          </div>
          <el-button
            icon="el-icon-document-copy"
            class="header-right"
            type="text"
            @click="copyToClipboard(containerdCommand)"
          ></el-button>
        </div>
        <div class="command-container">
          <code class="command-box">{{ containerdCommand }}</code>
        </div>
      </el-card>

      <el-card>
        <div slot="header" class="clearfix header-container">
          <div class="header-left">
            <span>Shell快速替换命令</span>
          </div>
          <el-button
            icon="el-icon-document-copy"
            class="header-right"
            type="text"
            @click="copyToClipboard(shellCommand)"
          ></el-button>
        </div>
        <div class="command-container">
          <code class="command-box">{{ shellCommand }}</code>
        </div>
      </el-card>
      <el-card v-if="Object.keys(imagedata.imageinfo).length > 0">
        <div slot="header" class="clearfix header-container">
          <div class="header-left">
            <span>镜像信息</span>
          </div>
          <!-- <el-button
            icon="el-icon-document-copy"
            class="header-right"
            type="text"
            @click="copyToClipboard(shellCommand)"
          ></el-button> -->
        </div>
        <div class="command-container">
          <code class="command-box">{{ imagedata.imageinfo }}</code>
        </div>
      </el-card>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    const { name } = this.$route.params
    this.repoName = name
    this.getList(1)
  },
  data() {
    return {
      tableData: [],
      dockerCommand: '',
      containerdCommand: '',
      shellCommand: '',
      repoName: '',
      searchResults: [{ name: 'test', count: 10 }],
      imagedata: {},
      pagination: {
        total: 6,
        page: 1,
        size: 2
      }
    }
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.getList(val)
    },
    async getList() {
      const image = this.repoName
      const { data: response } = await this.$http.get('image/repos/detail/', {
        params: {
          image
        }
      })
      if (response.code) {
        return this.$message.error(response.message)
      }
      this.imagedata = response.results
      console.log('xxxx', this.imagedata)
      this.initializeTableData()
      this.initializeCommands()
    },
    initializeTableData() {
      this.tableData = [
        { property: '源镜像', value: this.repoName, type: 'link' },
        { property: '国内镜像', value: this.imagedata.path, type: 'link' },
        { property: '镜像ID', value: this.imagedata.digest, type: 'text' },
        { property: '标签', value: this.imagedata.tag, type: 'text' },
        { property: '镜像大小', value: this.imagedata.size, type: 'text' },
        { property: '创建时间', value: this.imagedata.created, type: 'text' }
      ]
      if (this.imagedata.imageinfo && Object.keys(this.imagedata.imageinfo).length > 0) {
        this.tableData.push(
          {
            property: '平台',
            value: this.imagedata.imageinfo.Architecture,
            type: 'text'
          },
          { property: '更新时间', value: this.imagedata.updated, type: 'tag' },
          {
            property: '暴漏端口',
            value: this.imagedata.imageinfo.Config.ExposedPorts,
            type: 'tag'
          },
          {
            property: '环境变量',
            value: this.imagedata.imageinfo.Config.Env,
            type: 'tag'
          },
          {
            property: 'CMD',
            value: this.imagedata.imageinfo.Config.Cmd,
            type: 'tag'
          },
          {
            property: 'Entrypoint',
            value: this.imagedata.imageinfo.Config.Entrypoint,
            type: 'tag'
          }
        )
      }
      console.log('aaaa', this.tableData)
    },
    initializeCommands() {
      this.dockerCommand = `docker pull ${this.imagedata.path}\ndocker tag ${this.imagedata.path} ${this.repoName}`
      this.containerdCommand = `ctr images pull ${this.imagedata.path}\nctr images tag ${this.imagedata.path} ${this.repoName}`
      this.shellCommand = `sed -i 's#${this.repoName}#${this.imagedata.path}#' deployment.yaml`
    },
    copyToClipboard(text) {
      navigator.clipboard
        .writeText(text)
        .then(() => {
          this.$message({
            message: '复制成功',
            type: 'success'
          })
        })
        .catch(() => {
          this.$message({
            message: '复制失败',
            type: 'error'
          })
        })
    }
  }
}
</script>

<style scoped>
.repo-summary {
  text-align: center;
  margin: 20px 0;
}
.main-content {
  color: #333;
  text-align: center;
  min-height: 900px;
  margin-top: 60px;
  margin: 0 auto;
  width: 80%; /* Adjust the width as needed */
}
.table-wrapper {
  display: flex;
  justify-content: center;
}
.el-table {
  width: auto; /* Adjust the table width as needed */
}
.el-table-column {
  text-align: left; /* Left align the text in columns */
}
.image-grid {
  margin-top: 20px;
  margin-bottom: 20px;
}
.clearfix span {
  text-align: left;
}
/* pre {
    background-color: #1e1e1e;
    color: #fff;
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    font-size: inherit;
    white-space: pre-wrap;
  font-family: monospace;
  text-align: left; /* 确保文字左对齐 *} */
.el-card {
  margin-bottom: 20px;
}

.header-container {
  display: flex;
  /* justify-content: space-between; */
  gap: 10px; /* 设置子元素之间的间距 */
  align-items: center;
}
.header-right {
  flex-shrink: 0;
}

.command-container {
  background-color: #2d2d2d;
  padding: 10px;
  border-radius: 4px;
  color: #ffffff;
}

.command-box {
  display: block;
  white-space: pre-wrap;
  font-family: monospace;
  text-align: left;
  color: #ffffff;
}
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>
